<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Fluid Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="themes/icon.css">
    <link rel="stylesheet" type="text/css" href="demo/demo.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.easyui.min.js"></script>
    <script type="text/javascript" src="editor/javascript/Math.uuid.js"></script>

    <style>

        .editor-container {
            min-height: 420px;
            margin-left: 0px;
            margin-top: 10px;
            padding: 30px 15px 15px;
            border: 1px solid #DDDDDD;
            border-radius: 4px;
            position: relative;
            word-wrap: break-word;
            display: block;
        }

        .editor-container:after {
            background-color: #F5F5F5;
            border: 1px solid #DDDDDD;
            border-radius: 4px 0 4px 0;
            color: #9DA0A4;
            content: "Container";
            font-size: 12px;
            font-weight: bold;
            left: -1px;
            padding: 3px 7px;
            position: absolute;
            top: -1px;
        }

        .editor-container .widget {
            background-color: #F5F5F5;
            border: 1px solid #DDDDDD;
            border-radius: 4px 4px 4px 4px;
            padding: 5px;
            margin-top: 5px;
        }

        .editor-container .label {
            filter: alpha(opacity=20); opacity: 0.2;
            -webkit-transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            -ms-transition: all 500ms ease;
            -o-transition: all 500ms ease;
            transition: all 500ms ease;
        }

        .editor-container .remove {
            z-index: 10;
            background-color: #953b39 !important;
            border-radius: 3px;
            padding: 2px 4px;
            margin-bottom: 5px;
            font-size: 11.844px;
            font-weight: bold;
            line-height: 14px;
            color: #ffffff;
            vertical-align: baseline;
            white-space: nowrap;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
            text-decoration: none;
            cursor: pointer;
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            float: right;
            filter: alpha(opacity=20); opacity: 0.2;
            -webkit-transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            -ms-transition: all 500ms ease;
            -o-transition: all 500ms ease;
            transition: all 500ms ease;
        }

        .editor-container .icon-remove {
            display: inline-block;
            width: 14px;
            height: 14px;
            line-height: 14px;
            vertical-align: text-top;
            background-repeat: no-repeat;
            background-image: url('editor/images/glyphicons-halflings-white.png');
            background-position: -312px 0;
            margin-top: 1px;
            font-style: italic;
            font-size: 11.844px;
            font-weight: bold;
            color: #ffffff;
            white-space: nowrap;
            word-wrap: break-word;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
            cursor: pointer;
        }

        .editor-container .widget:hover > .label,
        .editor-container .widget:hover > .remove {
            filter: alpha(opacity=100); opacity: 1;
        }

        .widget-container {
            padding-left: 10px;
        }

        .widget-container .widget-item {
            cursor: pointer;
            list-style: none;
            padding: 10px;
        }

        .widget-container .widget-item input {
            width: 120px;
            background-color: #E0ECFF;
            border: 1px solid #95B8E7;
            border-radius: 3px;
            padding-left: 10px;
        }

        .proxy .label,
        .editor-container .label,
        .widget-container .label {
            display: inline-block;
            padding: 2px 4px;
            font-size: 11.844px;
            font-weight: bold;
            line-height: 14px;
            color: #ffffff;
            vertical-align: baseline;
            white-space: nowrap;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
            background-color: #999999;
            border-radius: 3px;
            z-index: 100;
        }

        .proxy .icon-move,
        .editor-container .icon-move,
        .widget-container .icon-move {
            cursor: pointer;
            display: inline-block;
            width: 14px;
            height: 14px;
            line-height: 14px;
            vertical-align: text-top;
            font-style: italic;
            font-weight: bold;
            line-height: 14px;
            white-space: nowrap;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
            color: #ffffff;
            background-image: url('editor/images/glyphicons-halflings.png');
            background-position: -168px -72px;
            background-repeat: no-repeat;
            margin-top: 1px;
        }

        .proxy{
            border:1px solid #ccc;
            width:200px;
            background:#fafafa;
            z-index: 100;
        }

        .proxy input {
            width: 120px;
            background-color: #E0ECFF;
            border: 1px solid #95B8E7;
            border-radius: 3px;
            padding-left: 10px;
        }

        .proxy .remove,
        .widget-container .remove {
            display: none !important;
        }

         .layout-table {
            display: none;
             width: 180px;
             border: 1px solid #DDDDDD;
             border-radius: 5px;
             margin-top: 5px;
        }

        .layout-table .layout-td {
            height: 30px;
            border: 1px solid #DDDDDD;
            padding:10px;
        }

        .menu-edit-button {

        }

    </style>

</head>
<body class="easyui-layout">
    <div data-options="region:'north',border:false" style="height:50px;padding:10px">
        编辑器
        <a id="edit-btn" href="#" class="easyui-linkbutton menu-edit-button" data-options="iconCls:'icon-add'">编辑</a>
        <a id="delete-btn" href="#" class="easyui-linkbutton menu-edit-button" data-options="iconCls:'icon-remove'">编辑</a>
    </div>

    <div data-options="region:'west',split:true,title:'控件'" style="width:250px;">
        <div id="widget-accordion" class="easyui-accordion" data-options="fit:true,border:false,selected:0">
            <div id="layout-widget" title="布局">
                <ul class="widget-container">
                    <li class="widget-item">
                        <div id="layout-widget-12" class="widget layout-widget">
                            <input id="layout-widget-input-12" value="12" readonly>
                            <span key="12" type="cp" class="label"><i class="icon-move"></i>拖动</span>
                            <a href="javascript:void(0);" key="12" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a>
                            <table id="layout-widget-table-12" class="layout-table">
                                <tr>
                                    <td colspan="12" class="layout-td"></td>
                                </tr>
                            </table>

                        </div>
                    </li>
                    <li class="widget-item">
                    <div id="layout-widget-66" class="widget layout-widget">
                        <input id="layout-widget-input-66" value="6 6" readonly>
                        <span key="66" type="cp" class="label"><i class="icon-move"></i>拖动</span>
                        <a href="javascript:void(0);" key="66" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a>
                        <table id="layout-widget-table-66" class="layout-table">
                            <tr>
                                <td colspan="6" class="layout-td" width="50%"></td>
                                <td colspan="6" class="layout-td" width="50%"></td>
                            </tr>
                        </table>

                    </div>

                </li>
                    <li class="widget-item">
                    <div id="layout-widget-48" class="widget layout-widget">
                        <input id="layout-widget-input-48" value="4 8" readonly>
                        <span key="48" type="cp" class="label"><i class="icon-move"></i>拖动</span>
                        <a href="javascript:void(0);" key="48" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a>
                        <table id="layout-widget-table-48" class="layout-table">
                            <tr>
                                <td colspan="4" class="layout-td" width="33.33%"></td>
                                <td colspan="8" class="layout-td" width="66.66%"></td>
                            </tr>
                        </table>

                    </div>

                </li>
                    <li class="widget-item">
                        <div id="layout-widget-84" class="widget layout-widget">
                            <input id="layout-widget-input-84" value="8 4" readonly>
                            <span key="84" type="cp" class="label"><i class="icon-move"></i>拖动</span>
                            <a href="javascript:void(0);" key="84" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a>
                            <table id="layout-widget-table-84" class="layout-table">
                                <tr>
                                    <td colspan="8" class="layout-td" width="66.66%"></td>
                                    <td colspan="4" class="layout-td" width="33.33%"></td>
                                </tr>
                            </table>

                        </div>

                    </li>
                    <li class="widget-item">
                    <div id="layout-widget-444" class="widget layout-widget">
                        <input id="layout-widget-input-444" value="4 4 4" readonly>
                        <span key="444" type="cp" class="label"><i class="icon-move"></i>拖动</span>
                        <a href="javascript:void(0);" key="444" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a>
                        <table id="layout-widget-table-444" class="layout-table">
                            <tr>
                                <td colspan="4" class="layout-td" width="33.33%"></td>
                                <td colspan="4" class="layout-td" width="33.33%"></td>
                                <td colspan="4" class="layout-td" width="33.33%"></td>
                            </tr>
                        </table>

                    </div>
                </li>
                    <li class="widget-item">
                        <div id="layout-widget-3333" class="widget layout-widget">
                            <input id="layout-widget-input-3333" value="3 3 3 3" readonly>
                            <span key="3333" type="cp" class="label"><i class="icon-move"></i>拖动</span>
                            <a href="javascript:void(0);" key="3333" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a>
                            <table id="layout-widget-table-3333" class="layout-table">
                                <tr>
                                    <td colspan="3" class="layout-td" width="25%"></td>
                                    <td colspan="3" class="layout-td" width="25%"></td>
                                    <td colspan="3" class="layout-td" width="25%"></td>
                                    <td colspan="3" class="layout-td" width="25%"></td>
                                </tr>
                            </table>

                        </div>
                    </li>
                    <li class="widget-item">
                        <div id="layout-widget-dynamic" class="widget layout-widget">
                            <input id="layout-widget-input-dynamic" maxlength="24" value="?">
                            <span id="layout-widget-span-dynamic" key="dynamic" type="cp" class="label"><i class="icon-move"></i>拖动</span>
                            <a href="javascript:void(0);" key="dynamic" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a>
                            <table id="layout-widget-table-dynamic" class="layout-table">
                                <tr>
                                    <td colspan="12" class="layout-td"></td>
                                </tr>
                            </table>

                        </div>
                    </li>
                </ul>
            </div>
            <div title="表单">这是表单组件模块</div>
            <div title="表格">这是表格组件模块</div>
            <div title="消息">这是消息组件模块</div>
        </div>
    </div>

    <div data-options="region:'east',split:true,title:'属性面板'" style="width:250px;padding:10px;">
        属性面板
    </div>

    <div data-options="region:'south',border:false" style="height:30px;padding:10px;"></div>

    <div data-options="region:'center',title:'画布'" style="padding:20px;">

        <div id="editor-container" class="editor-container">
            <!--<div class="editor-container-tag"></div>-->
           <!-- <table style="width: 100%;border: 1px solid #DDDDDD;border-radius: 5px;">
                <tr>
                    <td colspan="12" style="height: 30px;border: 1px solid #DDDDDD;">12</td>
                </tr>
                <tr>
                    <td colspan="6" style="height: 30px;border: 1px solid #DDDDDD;">6</td>
                    <td colspan="6" style="height: 30px;border: 1px solid #DDDDDD;">6</td>
                </tr>
                <tr>
                    <td colspan="4" style="height: 30px;border: 1px solid #DDDDDD;">4</td>
                    <td colspan="4" style="height: 30px;border: 1px solid #DDDDDD;">4</td>
                    <td colspan="4" style="height: 30px;border: 1px solid #DDDDDD;">4</td>
                </tr>
            </table>>-->
            <!--<table style="width: 100%;border: 1px solid #DDDDDD;border-radius: 5px;">
                <tr>
                    <td id="111" class="drag-td" colspan="12" style="height: 100px;border: 1px solid #DDDDDD;"></td>
                </tr>
            </table>-->
        </div>

    </div>

    <div style="clear:both"></div>

    <script>

        var droppableTargetId = "editor-container";

        $(function(){

            $('.label').draggable({
                revert:true,
                deltaX:10,
                deltaY:10,
                proxy:function(source){
                    var n = $('<div class="proxy"></div>');

                   var key = $(source).attr('key');
                   // console.log(key);

                    var dragSource = $("#layout-widget-"+key).clone();
                    dragSource.find("#layout-widget-table-"+key).show();

                    n.html($(dragSource).html()).appendTo('body');

                    return n;
                }
            });

            $('.editor-container').droppable({
                onDragEnter:function(e,source){
                    droppableTargetId = "editor-container";
                    // console.log('container onDragEnter');
//                    $(source).draggable('options').cursor='auto';
                },
                onDragLeave:function(e,source){
                    // console.log('container onDragLeave');
//                    $(source).draggable('options').cursor='not-allowed';
                },
                onDrop:function(e,source){
                    // console.log('container onDrop');
                    //console.log(source);
                    var key = $(source).attr('key');
                    var type = $(source).attr('type');

                    var dragSource = null;

                    if(type == "cp"){
                        dragSource = $("#layout-widget-"+key).clone();
                    }
                    else if(type == "rm"){
                        dragSource = $("#"+key).clone();
                    }


                    var uuid = Math.uuid();
                    $(dragSource).removeAttr("id");
                    $(dragSource).attr("id", uuid);

                    if(type == "cp"){
                        $(dragSource).find("#layout-widget-input-"+key).remove();
                        $(dragSource).find("#layout-widget-table-"+key).css('width','100%');
                        $(dragSource).find("#layout-widget-table-"+key).show();
                        $(dragSource).find("#layout-widget-table-"+key).removeAttr("id");

                    }

                    $(dragSource).find("a[key="+key+"]").attr("key", uuid);
                    $(dragSource).find("span[key="+key+"]").attr("key", uuid);
                    $(dragSource).find("span[key="+uuid+"]").attr("type", 'rm');
                    $(dragSource).find("td").attr("key", uuid);

                    $(dragSource).find("td").each(function(){
                        var tuuid = Math.uuid();
                        $(this).attr("id", tuuid);
                    });

                    // console.log(e);
                    console.log("type : "+type);
                     console.log("droppableTargetId : " + droppableTargetId);
                    $('#'+droppableTargetId).append( $(dragSource));

                    if(type == "rm"){
                        $("#"+key).remove();
                    }

                    initTdsDroppable( uuid );

                    $('.remove').click(function(){
                        var id = $(this).attr('key');
                        // console.log(id);
                        $("#"+id).remove();

                    });

                }
            });

            tableSystemGenerator();

        });

        function tableSystemGenerator() {
            $("#layout-widget-input-dynamic").bind("keyup", function() {
                var e = 0;
                var t = "";
                var n = $(this).val().split(" ", 12);
                $.each(n, function(n, r) {
                    e = e + parseInt(r);
                    var p = r/12 * 100;
                    t += '<td colspan="'+r+'" class="layout-td" width="'+p+'%"></td>'
                });
                if (e == 12) {
                    $('#layout-widget-table-dynamic').empty();
                    t = '<tr>' + t + '</tr>';
                    $('#layout-widget-table-dynamic').html(t);

                    $("#layout-widget-span-dynamic").show();
                } else {
                    $("#layout-widget-span-dynamic").hide();
                }
            })
        }

        function initTdsDroppable( key ){

            $('.editor-container').find('span[key='+key+']').draggable({
                revert:true,
                deltaX:10,
                deltaY:10,
                proxy:function(source){

                    var n = $('<div class="proxy"></div>');

                    var key = $(source).attr('key');
                    // console.log(key);

                    var dragSource = $("#"+key).clone();

                    n.html($(dragSource).html()).appendTo('body');

                    return n;
                }
            });

            $('.editor-container td').droppable({
                onDragEnter:function(e,source){
                    e.stopPropagation();
                    // console.log(e.target);

                    var id = $(e.target).attr("id");

                    console.log('td onDragEnter :id = '+ id);

                    droppableTargetId = id;
//                    $(source).draggable('options').cursor='auto';
                },
                onDragLeave:function(e,source){
                    e.stopPropagation();
                    // console.log('td onDragLeave');
                    droppableTargetId = "editor-container";
//                    $(source).draggable('options').cursor='not-allowed';
                },
                onDrop:function(e,source){
                    //e.stopPropagation();
                    // console.log('td onDrop');
                    //e.stopPropagation();
                    //console.log(e.target);
                }
            });
        }

        function supportLocalStorage() {
            if (typeof window.localStorage=='object')
                return true;
            else
                return false;
        }

        var layoutHhistory;
        function saveLayout(){

            var data = layoutHhistory;
            if (!data) {
                data={};
                data.count = 0;
                data.list = [];
            }

            if (data.list.length>data.count) {
                for (i=data.count;i<data.list.length;i++)
                    data.list[i]=null;
            }

            data.list[data.count] = $('#editor-container').html();
            data.count++;

            if (supportLocalStorage()) {
                localStorage.setItem("layoutData",JSON.stringify(data));
            }
            layoutHhistory = data;

        }

    </script>

</body>
</html>